<template>
  <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
    <div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
        <el-form-item label="证件名称" prop="cert_name">
          <el-input placeholder="输入证件名称" style="width: 100%" v-model="ruleForm.cert_name" />
        </el-form-item>
        <el-form-item label="证件号码" prop="cert_code">
          <el-input placeholder="证件号码" style="width: 100%" v-model="ruleForm.cert_code" />
        </el-form-item>
        <el-form-item label="是否有有效期" prop="valid_limit">
          <el-radio-group v-model="ruleForm.valid_limit" @change="handleRadio">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期" v-if="ruleForm.valid_limit == 1">
          <el-date-picker style="width: 100%" value-format="YYYY-MM-DD" v-model="ruleForm.valid_date" type="date"
            placeholder="有效期" />
        </el-form-item>
        <el-form-item label="上传证件">
          <el-upload class="upload-demo" action="#" :limit="1" :auto-upload="false" v-model:file-list="fileList"
            :on-change="fileOnChange" :on-remove="fileRemove">
            <el-button type="primary"> 上传资质证件 </el-button>
          </el-upload>
        </el-form-item>
      </el-form>

    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { fileApi } from "@/plugins/api/upload";
import { addApi, saveApi } from "@/plugins/api/customer/manage/cert";
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
});
let ruleForm = ref({
  valid_limit: 1,
});
let rules = {
  cert_name: [{ required: true, message: "请输入证件名称", trigger: "blur" }],
  valid_limit: [{ required: true, message: "是否有有效期", trigger: "change" }],
};
let dialogVisible = ref(false);
function handleClose(done) {
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => { });
}
let title = ref("");
let ruleFormRef = ref(null);
function initFun(type, row) {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  fileList.value = [];
  if (type == "add") {
    title.value = "新增证件";
    ruleForm.value = {};
    ruleForm.value.valid_limit = 1;
  } else {
    title.value = "编辑证件";
    ruleForm.value = Object.assign({}, row);
    if (row.files) {
      fileList.value.push({
        name: "资质证件",
        url: row.files,
      });
    }
  }

  dialogVisible.value = true;
}
const emit = defineEmits(["refreshList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = { ...ruleForm.value };
      obj.customer_id = props.dataInfo.id;
      if (fileList.value.length > 0) {
        obj.files = fileList.value[0].url;
      }
      if (ruleForm.value.id) {
        saveApi(obj).then(() => {
          ElMessage.success("编辑成功！");
          dialogVisible.value = false;
          emit("refreshList");
        });
      } else {
        addApi(obj).then((data) => {
          ElMessage.success("新增成功！");
          dialogVisible.value = false;
          emit("refreshList");
        });
      }
    }
  });
}
function handleRadio(data) {
  if (data === 0) {
    ruleForm.value.valid_date = "";
  }
}
// 上传
let fileList = ref([]);
function fileOnChange(file) {
  let formData = new FormData();
  formData.append("file", file.raw);
  fileApi(formData).then((resp) => {
    if (resp) {
      console.log(resp);
      fileList.value = [];
      fileList.value.push({
        name: resp.file_name,
        url: resp.file_url,
      });
    } else {
      ElMessage.danger("上传失败！请重新上传！");
    }
  });
}
function fileRemove() {
  fileList.value = [];
}
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss"></style>
